/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
	StyleSheet,
	Text,
	View,
	Image,
	TextInput,
	TouchableOpacity,
	ToolbarAndroid,
	Modal,
	Dimensions
} from 'react-native';



export default class shapModal extends Component {
	constructor(props) {
		super(props);
		this.state = {
			show: this.props.show,
        	type: this.props.type,
        	showModalShape: this.props.showModalShape,
        	bgColor:this.props.bgColor,
        	showModal:true,
        	modalButton:this.props.modalButton
		};
	}
	componentWillReceiveProps(nextProps){
		if(this.state.showModal){
	    	if(nextProps.show != this.state.show){
	    		this.setState({
	    			show:nextProps.show
	    		})
	    	}
	    }
  	}
	componentWillMount() {
		
		
	}
	
	componentDidMount() {
		
	}
	
	renderModal(){
		
	}
	closeModal(){
		this.setState({
			showModal:false,
			show:false
		})
	}
	renderConfirm(){
		return(
			<Modal
				animationType={"fade"}
				transparent={true}
				visible={this.state.show}
				onRequestClose={() => {}}
			>
				<View style={styles.modalBackground}>
					<View style={[styles.modalContent,this.props.modalContentStyle]}>
						{
							this.props.modalTitle && this.props.modalTitle.trim()!="" ?
								<View style={styles.modalItem}><Text style={styles.modalText}>{this.props.modalTitle}</Text></View> : null
						}
						<View style={styles.modalItem}>
							<Text style={styles.modalText}>{this.props.modalContentText}</Text>
						</View>
						<View style={styles.modalButton}>
						{
							this.state.modalButton.map((item,key)=>{
								return(
									<TouchableOpacity 
										style={[styles.buttonItem]} 
										key={key}
										onPress={
											()=>{item.type !='cancel' ? item.handler() :  this.closeModal()}
										}
									>
										<View
											style={[
												styles.modalButtonText,
												this.state.modalButton.length-1==key ? {borderRightWidth:0}:{borderRightWidth:1},
											]}
										>
											<Text 
												style={[
													styles.modalText,
													{textAlign:'center'},
													item.color && item.color.trim()!="" ? {color:item.color}:{color:"#8e8e8e"}
												]}>
												{item.text}
											</Text>
										</View>
									</TouchableOpacity>									
								) 
							})
						}
							
						</View>
					</View>
				</View>
			</Modal>			
		)
	}
	
	render() {
		if(this.props.type=="confirm"){
			return this.renderConfirm()
		}
	}
}

const styles = StyleSheet.create({
	modalBackground:{
		backgroundColor:'rgba(0, 0, 0, 0.5)', 
		flex:1,
		justifyContent:"center",
		alignItems:"center",
	},
	modalContent:{
		width:Dimensions.get('window').width*0.8,
		backgroundColor:"#fff",
		borderRadius:5,
		display:"flex",
		flexDirection:"column",
		
	},
	modalText:{
		color:"#000",
		fontSize:15,
	},
	modalItem:{
		paddingVertical:20,
		paddingHorizontal:20,
		borderBottomWidth:1,
		borderColor:"#E7E7E7",
		
	},
	modalButton:{
		display:"flex",
		flexDirection:"row",
		justifyContent:"center",
		alignItems:"center"
	},
	buttonItem:{
		paddingVertical:10,
		flex:1,
		
		
	},
	modalButtonText:{
		height:32,
		borderRightWidth:1,
		borderColor:"#E7E7E7",
		display:"flex",
		justifyContent:"center",
		alignItems:"center"
		
	}
});